<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>班级管理</title>
        <!-- <link rel="stylesheet" href="../layui/css/layui.css" /> -->
        <style>
            .type {
                width: 100px;
            }
            .value {
                width: 300px;
            }
            .addForm{
                padding:20px;
            }
        </style>
    </head>
    <body>
        <table id="classTable" lay-filter="classTable"></table>
        <script type="text/html" id="tools">
                <form class="layui-form" lay-filter="searchForm">
              <div class="layui-input-inline">
                  <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                      <i class="layui-icon">&#xe654;</i>
                </button>
              </div>
                  <div class="layui-input-inline value">
                      <input readonly type="text" name="startDate" placeholder="请输入起始时间" class="layui-input date">
                  </div>
                  <div class="layui-input-inline value">
                    <input readonly type="text" name="endDate" placeholder="请输入结束时间" class="layui-input date">
                </div>
                  <div class="layui-input-inline">
                      <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                          <i class="layui-icon">&#xe615;</i>
                        </button>
                  </div>
            </div>
        </form>
        </script>
        <!-- <div id="addContent" style="display:none">
            
        </div> -->
        <script type="text/html" id="action">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                >删除</a
            >
        </script>
       
        <!-- <script src="../layui/layui.js"></script>
        <script src="../js/mock-min.js"></script>
        <script src="../lesson13/data.js"></script> -->
        
        <!-- <script src="./data.js"></script> -->
        <script>
            
            layui.define(function () {
                let { $, table,layer,form,laydate } = layui;
               
                table.render({
                    elem: "#classTable",
                    url: "/classes", //数据接口
                    method: "get",
                    toolbar: "#tools",
                    page:true,
                    limit:5,
                    limits:[5,10,15,20,25],
                    request: {
                        pageName: 'current' //页码的参数名称，默认：page
                        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    },
                    parseData:function(res){
                        return {
                            code:0,
                            count:res.data.total,
                            data:res.data.rows
                        }
                    },
                    done(){
                        laydate.render({
                            elem:".date"
                        });
                    },
                    cols: [
                        [
                            //表头
                            {
                                field: "name",
                                title: "班级名称",
                            },
                            { field: "count", title: "班级人数" },
                            {
                                field: "teacher",
                                title: "带班老师",
                            },
                            {
                                field: "createDate",
                                title: "开班时间",
                            },
                            {
                                title: "操作",
                                templet: "#action",
                            },
                        ],
                    ],
                });
                
                table.on('toolbar(classTable)', function(obj){
                    if(obj.event == "add"){
                        layer.open({
                            type: 1, 
                            title:"增加班级",
                            btn:['确定','取消'],
                            success:function(){
                                form.render();
                                laydate.render({
                                    elem: '[name=createDate]' //指定元素
                                });
                            },
                            yes:function(index){
                                $.ajax({
                                    type:"post",
                                    url:"/addClass",
                                    data:form.val("addForm"),
                                    processData:false,
                                    dataType:"json",
                                    success(){
                                        table.reload("classTable",{
                                            where:{}
                                        });
                                        layer.close(index);
                                    }
                                });
                               
                            },
                            content: `
                            <form class="layui-form addForm" lay-filter="addForm" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">班级名称</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入班级名称"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开班人数</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="count"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入开班人数"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">带班老师</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="teacher"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入带班老师"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开班时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" name="createDate">
                                    </div>
                                </div>
                            </form>
                            `
                        });
                    }else if(obj.event == "search"){
                        // 搜索
                        table.reload("classTable",{
                            where:form.val("searchForm")
                        });
                    }
                })
                table.on('tool(classTable)', function(obj){
                    if(obj.event == "del"){
                        layer.confirm('是否删除?', function(index){
                            $.ajax({
                                type:"post",
                                url:"/delClass",
                                processData:false,
                                dataType:"json",
                                data:{
                                    id:obj.data.id
                                },
                                success(){
                                    layer.close(index);
                                    table.reload("classTable");
                                }
                            });
                            
                        });  
                    }else if(obj.event == "edit"){
                        layer.open({
                            type: 1, 
                            title:"修改班级",
                            btn:['确定','取消'],
                            success:function(){
                                form.render();
                                laydate.render({
                                    elem: '[name=createDate]' //指定元素
                                });
                                $.ajax({
                                    type:"post",
                                    url:"/findById",
                                    processData:false,
                                    dataType:"json",
                                    data:{
                                        id:obj.data.id
                                    },
                                    success(res){
                                        form.val("updateForm",res.cls);
                                    }
                                });
                                
                            },
                            yes:function(index){
                                $.ajax({
                                    type:"post",
                                    url:"/updateClass",
                                    data:{
                                        id:obj.data.id,
                                        ...form.val("updateForm")
                                    },
                                    processData:false,
                                    dataType:"json",
                                    success(){
                                        table.reload("classTable");
                                        layer.close(index);
                                    }
                                });
                               
                            },
                            content: `
                            <form class="layui-form addForm" lay-filter="updateForm" action="">
                                
                                <div class="layui-form-item">
                                    <label class="layui-form-label">班级名称</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            lay-verify="required"
                                            placeholder="班级名称"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">带班人数</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="count"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入带班人数"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">带班老师</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="teacher"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入带班老师"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">开班时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" name="createDate">
                                    </div>
                                </div>
                            </form>
                            `
                        });
                    }
                })

                
            });
        </script>
       
    </body>
</html>
